<template>
  <div>
    <el-tabs>
      <el-tab-pane>
        <template #label>
          <div>
            <span class="font_16px">
              <i class="el-icon-lx-skin"></i>
              {{ icon_title }}
            </span>
          </div>
        </template>
        <div id="icon_div" :style="autoHeight">
          <div v-for="item in iconArrys" :key="item">
            <div class="crumbs icon_crumbs">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <i class="el-icon-lx-cascades"></i>
                  {{ item.title }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="container icon_container">
              <el-scrollbar>
                <div v-for="ite in item.icons" :key="ite" class="icon_div_style">
                  <el-button
                    :type="icon == ite ? 'danger' : 'primary'"
                    circle
                    :icon="ite"
                    size="medium "
                    @click="IconSelect(ite)"
                  ></el-button>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import fonts from "../assets/config/iconfont.json";
let windowHeight = parseInt(window.innerHeight);
export default {
  props: {
    icon: {
      type: String,
      defaultvalue: ""
    }
  },
  data() {
    return {
      autoHeight: {
        height: ""
      }, 
      icon_title: "图标选择",
      innerDrawer: false,
      iconArrys: [
        {
          icons: fonts.icons,
          title: this.$t("icon.elemneticon")
        },
        {
          icons: fonts.icons_lx,
          title: this.$t("icon.defaulticon")
        }
      ]
    };
  },
  methods: {
    IconSelect(item) {
      this.$emit("IconSelected", item);
    },
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
    }
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  }
};
</script>
<style scoped>
.icon_div_style {
  margin: 9px;
  float: left;
}
.icon_container {
  height: 360px;
  margin: 15px;
  padding: 10px;
}
.icon_crumbs {
  margin-left: 15px;
}
</style>
